<template>
  <div :class="{ left: true, animationStart: animationShow.animationStartShow, animationEnd: animationShow.animationEndShow }"><!--  -->
    <img
      @mousewheel.prevent
      v-if="leftOpenOrCloseShow.leftOpenOrClose"
      @click="openOrClose"
      class="openOrClose"
      src="@/assets/screenShowImg/左边展开收起按钮.png"
      alt=""
    />
    <img
      @mousewheel.prevent
      v-else
      class="openOrClose"
      @click="openOrClose"
      src="@/assets/screenShowImg/左边展开收起按钮.png"
      alt=""
    />
    <div class="devState">
      <div class="title">
        <img src="@/assets/screenShowImg/标题组件背景.png" />
        <div>
          <img src="@/assets/screenShowImg/icons-标题.png" />
          <p>设备状态监控</p>
        </div>
      </div>
      <ul>
        <li>
          <div>
            <img src="@/assets/screenShowImg/集中控制器.png" alt="" />
            <p>
              网关<br /><span>{{ devStateObj.gatewayOn + devStateObj.gatewayOff }}</span>
            </p>
          </div>
          <div>
            <div>
              <p>
                <img src="@/assets/screenShowImg/在线图例装饰.png" alt="" /><span>在线</span>
              </p>
              <p>{{ devStateObj.gatewayOn }}</p>
            </div>
            <div>
              <p>
                <img src="@/assets/screenShowImg/离线图例装饰.png" alt="" /><span>离线</span>
              </p>
              <p>{{ devStateObj.gatewayOff }}</p>
            </div>
          </div>
        </li>
        <li>
          <div>
            <img src="@/assets/screenShowImg/单灯控制器.png" alt="" />
            <p>
              灯<br /><span>{{ statsData.light }}</span>
            </p>
          </div>
          <div>
            <div>
              <p>
                <img src="@/assets/screenShowImg/在线图例装饰.png" alt="" /><span>在线</span>
              </p>
              <p>{{ statsData.onlineTotal }}</p>
            </div>
            <div>
              <p>
                <img src="@/assets/screenShowImg/离线图例装饰.png" alt="" /><span>离线</span>
              </p>
              <p>{{ statsData.offlineTotal }}</p>
            </div>
          </div>
        </li>
        <li>
          <div>
            <img src="@/assets/screenShowImg/集中控制器.png" alt="" />
            <p>
              传感器<br /><span>{{ devStateObj.sensorOn + devStateObj.sensorOff }}</span>
            </p>
          </div>
          <div>
            <div>
              <p>
                <img src="@/assets/screenShowImg/在线图例装饰.png" alt="" /><span>在线</span>
              </p>
              <p>{{ devStateObj.sensorOn }}</p>
            </div>
            <div>
              <p>
                <img src="@/assets/screenShowImg/离线图例装饰.png" alt="" /><span>离线</span>
              </p>
              <p>{{ devStateObj.sensorOff }}</p>
            </div>
          </div>
        </li>
        <li>
          <div>
            <img src="@/assets/screenShowImg/集中控制器.png" alt="" />
            <p>
              回路<br /><span>{{ devStateObj.loopsOn + devStateObj.loopsOff }}</span>
            </p>
          </div>
          <div>
            <div>
              <p>
                <img src="@/assets/screenShowImg/在线图例装饰.png" alt="" /><span>在线</span>
              </p>
              <p>{{ devStateObj.loopsOn }}</p>
            </div>
            <div>
              <p>
                <img src="@/assets/screenShowImg/离线图例装饰.png" alt="" /><span>离线</span>
              </p>
              <p>{{ devStateObj.loopsOff }}</p>
            </div>
          </div>
        </li>
      </ul>
      <!-- <el-empty description="暂无数据" v-else /> -->
    </div>
    <div class="devFault">
      <div class="title">
        <img src="@/assets/screenShowImg/标题组件背景.png" />
        <div>
          <img src="@/assets/screenShowImg/icons-标题.png" />
          <p>设备故障告警</p>
        </div>
      </div>
      <div v-show="devFaultList.length > 0" class="devFaultList">
        <div class="th">
          <p>等级</p>
          <p>告警内容</p>
          <p>告警时间</p>
        </div>
        <div v-for="item in devFaultList" :key="item.id">
          <p
            :style="{
              backgroundColor: item.level == 1 ? '#ff6961' : 
                            item.level == 2 ? '#ffb340' : 
                            item.level == 3 ? '#409cff' : 
                            item.level == 4 ? '#73c0de' : 
                            item.level == 5 ? '#36cfc9' : '#cccccc'
            }"
          >
            {{ item.level == 1 ? '致命' : 
              item.level == 2 ? '严重' : 
              item.level == 3 ? '告警' : 
              item.level == 4 ? '一般' : 
              item.level == 5 ? '提示' : '未知' }}
          </p>
          <p :title="item.details">{{ item.details }}</p>
          <p>{{ dayjs(item.alertTime).format('YYYY-MM-DD HH:mm:ss') }}</p>
        </div>
      </div>
      <!-- <el-empty v-show="devFaultList.length == 0" description="暂无数据" /> -->
    </div>
    <!-- <ResponseTime /> -->
    <div class="devDistribution">
      <div class="title">
        <img src="@/assets/screenShowImg/标题组件背景.png" />
        <div>
          <img src="@/assets/screenShowImg/icons-标题.png" />
          <p>工单统计</p>
        </div>
      </div>
      <!-- <div>
        <div class="tab">
          <div>
            <p :class="{ active: pmHDM == '1' }" data-id="1" @click="pmTabHDM('1')">
              按时
            </p>
            <p :class="{ active: pmHDM == '2' }" data-id="2" @click="pmTabHDM('2')">
              按天
            </p>
            <p :class="{ active: pmHDM == '3' }" data-id="3" @click="pmTabHDM('3')">
              按月
            </p>
          </div>
        </div>
        <div ref="PMEchartsRef" class="PMEcharts"></div>
      </div> -->
      <div class="progress">
        <div>
          <el-progress
            type="circle" 
            :percentage="100"
            :stroke-width="10"
            color="#83efea"
          >
            <template #default="{ percentage }">
              <p>56<span>个</span></p>
              全部
            </template>
          </el-progress>
        </div>
        <div>
          <el-progress
            type="circle" 
            :percentage="100" 
            :stroke-width="10"
            color="#ffb340"
          >
            <template #default="{ percentage }">
              <p>6<span>个</span></p>
              待处理
            </template>
          </el-progress>
        </div>
        <div>
          <el-progress
            type="circle" 
            :percentage="100" 
            :stroke-width="10"
            color="gray"
          >
            <template #default="{ percentage }">
              <p>50<span>个</span></p>
              已处理
            </template>
          </el-progress>
        </div>
      </div>
      <!-- <div class="devDistributionEcharts" id="devDistributionEcharts" ref="chartRef"></div> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
// import ResponseTime from './ResponseTime.vue'
import { stats } from '@/api/index'
import dayjs from 'dayjs'
import { getMsgList } from '../../iot/alarm/api/alarm.api'

const animationShow = reactive({
  animationStartShow: true,
  animationEndShow: false,
})

const devStateObj = reactive({
  // "lightOn": 0,
  // "lightOff": 15,
  "gatewayOn": 0,
  "gatewayOff": 0,
  "sensorOn": 0,
  "sensorOff": 0,
  "loopsOn": 0,
  "loopsOff": 0
})
const devFaultList = ref<any[]>([])
const leftOpenOrCloseShow = reactive({
  leftOpenOrClose: true,
})

onMounted(() => {
  getDevState()
  getDevFaultList()

  setTimeout(() => {
    animationShow.animationEndShow = true
  }, 100)
  setTimeout(() => {
    animationShow.animationStartShow = false
    animationShow.animationEndShow = false
  }, 2500)
})

// 获取设备数量统计
const statsData = ref<any>({})
const getDevState = async() => {
  stats().then((res) => {
    statsData.value = res.data

    // 从数组中查找name为'灯'的项
    const lightItem = statsData.value.deviceStatsOfCategory.find(item => item.name == '灯')
    if (lightItem) {
      statsData.value.light = lightItem.value
    } else {
      statsData.value.light = 0
    }
  })
}

// 获取设备故障列表
const getDevFaultList = async() => {
  getMsgList({
    pageSize: 999,
    pageNum: 1,
  }).then((res) => {
    devFaultList.value = res.data.rows
  })
}

// 点击折叠图片
const openOrClose = (e) => {
  if (leftOpenOrCloseShow.leftOpenOrClose) {
    e.target.parentNode.classList.add('leftOpenOrClose')
    leftOpenOrCloseShow.leftOpenOrClose = false
  } else {
    e.target.parentNode.classList.remove('leftOpenOrClose')
    leftOpenOrCloseShow.leftOpenOrClose = true
  }
}
</script>

<style lang="scss" scoped>
.left {
  display: flex;
  flex-direction: column;
  width: 23.22916%;
  min-width: 410px;
  transition: 0.4s all;
  position: relative;
  z-index: 10;
  padding: 1%;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
  > img {
    height: 100%;
  }
  > .openOrClose {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(100%, -50%);
  }
  > div.devState {
    width: 100%;
    flex: 1;
    height: 44%;
    display: flex;
    flex-direction: column;
    div.title {
      width: 100%;
      flex: 0 0 auto;
      position: relative;
      > img {
        width: 100%;
      }
      > div {
        position: absolute;
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
        height: 100%;
        display: flex;
        align-items: center;
        > img {
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
        > p:nth-of-type(1) {
          font-size: 18px;
          font-weight: 600;
          text-indent: 25px;
        }
      }
    }
    ul {
      width: 100%;
      flex: 1 1 auto;
      overflow: auto;
      padding: 0;
      margin: 0;
      li {
        width: 100%;
        display: flex;
        margin: 1.1% 0;
        line-height: 21px;
        > div:nth-of-type(1) {
          width: 40%;
          display: flex;
          align-items: center;
          img {
            width: 37.6%;
          }
          p {
            font-size: 14px;
            margin: 0 0 0 6.5%;
            span {
              font-size: 16;
              // color: #c1ebeb;
            }
          }
        }
        > div:nth-of-type(2) {
          width: 59%;
          display: flex;
          background: url('@/assets/screenShowImg/设备状态列表背板.png') no-repeat;
          background-size: 100%;
          > img {
            width: 100%;
          }
          > div {
            width: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            > p:nth-of-type(1) {
              font-size: 12px;
              width: 50%;
              margin: 0;
              img {
                margin-right: 8.8%;
              }
            }
            > p:nth-of-type(2) {
              font-size: 16px;
              margin: 0;
            }
          }
          > div:nth-of-type(1) {
            > p:nth-of-type(2) {
              // color: #83efea;
              margin: 0;
            }
          }
        }
      }
    }
  }
  > div.devFault {
    width: 100%;
    height: 26%;
    display: flex;
    flex-direction: column;
    div.title {
      width: 100%;
      flex: 0 0 auto;
      position: relative;
      > img {
        width: 100%;
      }
      > div {
        position: absolute;
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
        height: 100%;
        display: flex;
        align-items: center;
        > img {
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
        > p:nth-of-type(1) {
          font-size: 18px;
          font-weight: 600;
          text-indent: 25px;
        }
      }
    }
    > div.devFaultList {
      width: 100%;
      flex: 1 1 auto;
      overflow: auto;
      > div {
        display: flex;
        height: 24px;
        align-items: center;
        padding-left: 4px;
        > p {
          height: 18px;
          font-family: 'Source Han Sans CN';
          letter-spacing: 0.066px;
          font-size: 12px;
          margin-right: 4px;
          overflow: hidden;
          line-height: 18px;
          text-align: center;
        }
        > p:nth-of-type(1) {
          width: 10%;
          border-radius: 4px;
        }
        > p:nth-of-type(2) {
          width: 70%;
          text-align: left;
        }
        > p:nth-of-type(3) {
          width: 20%;
        }
      }
      > div:hover {
        background-color: #c4c4c41a;
      }
      > div.th:hover {
        background-color: transparent;
      }
      > div.th {
        > p {
          line-height: 18px;
          // color: #8fd6d8;
          overflow: hidden;
          background-color: transparent;
        }
        > p:nth-of-type(1) {
          width: 10%;
        }
        > p:nth-of-type(2) {
          width: 70%;
        }
        > p:nth-of-type(3) {
          width: 20%;
        }
      }
    }
    .el-empty {
      margin: 0;
      padding: 0;
      width: 100%;
      flex: 1 1 auto;
      overflow: auto;
      :deep(.el-empty-image) {
        height: 70px;
      }
    }
  }
  > div.devDistribution {
    width: 100%;
    height: 30%;
    // position: relative;
    display: flex;
    flex-direction: column;
    div.title {
      width: 100%;
      flex: 0 0 auto;
      position: relative;
      > img {
        width: 100%;
      }
      > div {
        position: absolute;
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
        height: 100%;
        display: flex;
        align-items: center;
        > img {
          position: absolute;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
        > p:nth-of-type(1) {
          font-size: 18px;
          font-weight: 600;
          text-indent: 25px;
        }
      }
    }
    > div {
      width: 100%;
      flex: 1 1 auto;
      overflow: auto;
      .tab {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        > div {
          width: 46.5%;
          background: #ccf8ff;
          line-height: 25px;
          font-size: 14px;
          // color: rgba(255, 255, 255, 0.564);
          display: flex;
          align-items: center;
          font-family: 'Noto Sans CJK SC';
          p {
            flex: 1;
            text-align: center;
            cursor: pointer;
            margin: 0;
          }
          .active {
            background: url('@/assets/screenShowImg/切换日月年.png') no-repeat;
            background-size: 100%;
          }
        }
      }
    }
    > div.progress  {
      width: 100%;
      display: flex;
      // height: 100%;
      flex: 1 1 auto;
      overflow: auto;
      > div:nth-of-type(1) {
        width: 33%;
        font-family: 'Source Han Sans CN';
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        p {
          font-size: 25px;
          font-family: 'D-DIN';
          margin-bottom: 6%;
          margin-top: 0;
          color: black;
          span {
            font-family: 'D-DIN';
            font-size: 16px;
            color: black;
          }
        }
        :deep(.el-progress) {
          .el-progress-circle {
            width: 110px !important;
            height: 110px !important;
          }
        }
      }
      > div:nth-of-type(2) {
        width: 34%;
        font-family: 'Source Han Sans CN';
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        p {
          font-size: 25px;
          font-family: 'D-DIN';
          margin-bottom: 6%;
          margin-top: 0;
          color: black;
          span {
            font-family: 'D-DIN';
            font-size: 16px;
            color: black;
          }
        }
        :deep(.el-progress) {
          .el-progress-circle {
            width: 110px !important;
            height: 110px !important;
          }
        }
      }
      > div:nth-of-type(3) {
        width: 33%;
        font-family: 'Source Han Sans CN';
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        p {
          font-size: 25px;
          font-family: 'D-DIN';
          margin-bottom: 6%;
          margin-top: 0;
          color: black;
          span {
            font-family: 'D-DIN';
            font-size: 16px;
            color: black;
          }
        }
        :deep(.el-progress) {
          .el-progress-circle {
            width: 110px !important;
            height: 110px !important;
          }
        }
      }
    }
    // > div.devDistributionEcharts {
    //   width: 100%;
    //   height: 100%;
    //   flex: 1 1 auto;
    //   overflow: auto;
    //   position: relative;
    // }
  }
}
.left.animationStart {
  transform: translateX(-100%);
  > .devState {
    transform: translateX(-33%);
  }
  > .devFault {
    transform: translateX(-66%);
  }
  > .devDistribution {
    transform: translateX(-100%);
  }
}
div.left.animationEnd {
  transition: 2.5s all;
  transform: translateX(0%);
  > .devState {
    transition: 2.5s all;
    transform: translateX(0%);
  }
  > .devFault {
    transition: 2.5s all;
    transform: translateX(0%);
  }
  > .devDistribution {
    transition: 2.5s all;
    transform: translateX(0%);
  }
}
.leftOpenOrClose {
  transition: 0.4s all;
  transform: translateX(-100%);
}
.PMEcharts {
  width: 99%;
  height: 15vh; // 可根据实际需求调整高度
}
</style>
  